<template>
	<view class="container">
		<view class="status-bar">
			<!-- 非h5端状态栏占位 -->
		</view>

		<view class="header">
			<uni-icons type="back" size="20" @click="back"></uni-icons>
			<text>账号设置</text>
		</view>

		<view class="update" @click="update">
			<text>修改资料</text>
			<uni-icons type="forward" size="20" class="icon" color="#ddd"></uni-icons>
		</view>

		<button @click="logout" :disabled="!userInfo.id">退出登录</button>

		<uni-popup :ref="popup" type="center" border-radius="20rpx" :mask-click="false">
			<view class="popup-content">
				<text>修改资料</text>
				<view class="list">
					<view class="list-item">
						<text>头像&nbsp;&nbsp;&nbsp;</text>
						<image :src="'http://localhost:8080'+userInfo.image" class="headimg" @click="change"></image>
					</view>
					<view class="list-item">
						<text>昵称&nbsp;&nbsp;&nbsp;</text>
						<uni-easyinput v-model="userInfo.name" :value="userInfo.name" @input="add1"></uni-easyinput>
					</view>
					<view class="list-item">
						<text>手机号</text>
						<uni-easyinput v-model="userInfo.phone" :value="userInfo.phone" @input="add2"></uni-easyinput>
					</view>
				</view>

				<view class="bt">
					<button @click="close">关闭</button>
					<button @click="submit" class="bt-sure">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		reactive,
		ref
	} from 'vue'

	onLoad(() => {
		const userData = uni.getStorageSync('userInfo')
		if (userData.id) {
			Object.assign(userInfo, userData);
		} else {
			Object.assign(userInfo, userInfoInit);
		}
	})

	const userInfoInit = {
		id: '',
		name: '',
		phone: '',
		password: '',
		follow: 0,
		fans: 0,
		image: '/image/default.jpg'
	}

	function add1(e) {
		userInfo.name = e
	}

	function add2(e) {
		userInfo.phone = e
	}

	const userInfo = reactive({
		...userInfoInit
	});

	function back() {
		uni.navigateBack();
	}

	function update() {
		if (!userInfo.id) {
			uni.showToast({
				title: '请先登录',
				icon: 'error',
				duration: 2000
			});
		} else {
			popup.value.open()
		}
	}

	const popup = ref('popup')

	function submit() {
		uni.request({
			url: 'http://localhost:8080/user',
			method: 'PUT',
			data: {
				id: userInfo.id,
				name: userInfo.name,
				phone: userInfo.phone,
				image: userInfo.image
			},
			success: res => {
				// 更新本地缓存
				uni.setStorageSync('userInfo', userInfo);
				console.log(userInfo);

				uni.showToast({
					title: '修改成功',
					icon: 'none',
					duration: 2000
				});
				close()

				console.log("更改头像后请重启服务器");
			},
			fail: () => {
				uni.showToast({
					title: '修改失败',
					icon: 'none',
					duration: 2000
				});
			},
			complete: () => {}
		});
	}

	function close() {
		popup.value.close()
	}

	function logout() {
		uni.showModal({
			title: '确认退出',
			content: '您确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.removeStorageSync('userInfo');
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			}
		});
	}

	function change() {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				let tempFilePath = res.tempFilePaths[0]
				uni.uploadFile({
					url: 'http://localhost:8080/upload',
					filePath: tempFilePath,
					name: 'file',
					success: (res) => {
						uploadedImageUrl.value = JSON.parse(res.data).data;
						userInfo.image = uploadedImageUrl.value
					}
				})
			}
		})
	}

	const uploadedImageUrl = ref(userInfo.image)
</script>

<style scoped>
	page {
		background-color: #EDEFF1;
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.header {
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
	}

	.header text {
		margin-left: 20rpx;
	}

	.headimg {
		width: 120rpx;
		height: 120rpx;
	}

	.update {
		margin-top: 40rpx;
		padding: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	button {
		margin-top: 40rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 0%;
		font-size: 32rpx;
		padding: 6rpx;
	}

	button::after {
		border: none;
	}

	button[disabled] {
		background-color: #fff;
		color: #eee;
	}

	.button-hover {
		color: #F85959;
		background-color: #fff;
	}

	.popup-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 5rpx;
		display: flex;
		flex-direction: column;
	}

	.popup-content text {
		padding: 20rpx;
		width: auto;
		text-align: center;
	}

	.bt {
		display: flex;
		flex-direction: row;
	}

	.bt-sure {
		color: #fff;
		background-color: darkturquoise;
	}

	.list {
		padding: 40rpx;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}
</style>